<template>
    <div class="page">
        <div class="button">
            <span class="">搜索：</span>
            <div class="input_search">
                <el-input
                    v-model="state.keyword"
                    placeholder="请输入关键字"
                    clearable
                    @keyup.enter="getsearch"
                    @clear="getsearch"
                />
            </div>
            <div class="search_button">
                <el-button type="primary" :icon="Search" @click="getsearch">搜索</el-button>
                <el-button type="primary" class="Synchronize_but" :icon="RefreshRight" @click="getSynchronize">
                    同步
                </el-button>
            </div>
        </div>

        <div class="table">
            <el-table
                ref="multipleTable"
                v-loading="state.loading"
                height="100%"
                :data="state.tableData"
                style="width: 100%"
                border
            >
                <template v-for="item in state.data" :key="item.porp">
                    <el-table-column
                        align="center"
                        :prop="item.porp"
                        :label="item.label"
                        :min-width="item.width"
                    ></el-table-column>
                </template>
            </el-table>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, onMounted, ref, nextTick, watch } from 'vue';
import API from '@/api';
import { Search, RefreshRight } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const state = reactive({
    tableData: [],
    loading: false,
    data: [
        { label: '页面URL', porp: 'pageUrl' },
        { label: '按钮名称', porp: 'buttonName' },
        { label: '接口名称', porp: 'authorityName' },
        { label: '权限标识', porp: 'authority' },
        { label: '同步时间', porp: 'createTime' }
    ],
    keyword: ''
});
// 搜素
const getsearch = () => {
    state.loading = true;
    getList();
};

// 同步
const getSynchronize = async () => {
    try {
        const resp = await API.authority_sync({ method: 'POST' });
        getsearch();
        ElMessage.success('同步成功');
    } catch (err) {}
};
// 初始化
const getList = async () => {
    try {
        state.loading = false;
        const resp = await API.authority_list({ data: { keyword: state.keyword }, method: 'GET' });
        state.tableData = resp;
    } catch (err) {
        state.loading = false;
    }
};
onMounted(() => {
    state.loading = true;
    getList();
});
</script>
<style lang="scss" scoped>
.page {
    height: 100%;
    overflow: hidden;
}
.button {
    margin: 15px;
    span {
        font-size: 14px;
    }
}
.input_search {
    display: inline-block;
    width: 200px;
}
.search_button {
    display: inline-block;
    margin-left: 20px;
    .Synchronize_but {
        margin-left: 10px;
    }
}

.table {
    height: 750px;
}
</style>
